<template>
  <div class="layout">
    <load :state="loading"/>
    <div class="container">
      <!--@click.native="changeAvatar"-->
      <!--<area-choose num="3" ref="areaChoose" @getArea="getAreaData"/>-->
      <van-uploader
        :after-read="changeAvatar"
        accept="image/*"
        :oversize="upNoFile"
      >
        <cell-avatar-picker text-left="头像" :avatar="avatar"/>
      </van-uploader>
      <div class="divider" style="margin-left: 3vw;width:97vw"></div>
      <div class="space"></div>
      <cell-edit-text text-left="昵称" :text-default=nickName :icon-right="getIcon()" @getText="changeNickName"/>
      <div class="space"></div>
      <div class="new-i">
        <span class="text-left">身份</span>
        <div class="expand"></div>
        <span class="new-ir">{{identity}}</span>
      </div>
    </div>
    <p class="okc" v-show="textBtn">您现在处于审核期内，<br>{{textBtn}}</p>
    <!--<div style="flex: 1"></div>-->
    <div class="footer">
      <btn-primary btn-text="确认" @click.native="commit"/>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  // import Public from '@/assets/js/public';
  import CellAvatarPicker from '../../components/user/CellAvatarPicker';
  import Cell from '../../components/user/Cell';
  import BtnPrimary from '../../components/common/BtnPrimary';
  import CellEditText from '../../components/user/CellEditText';
  import AreaChoose from '../../components/common/areaChoose';
  import Types from '@/store/OperationType';
  import Load from '../../components/common/load/load';
  import Moment from 'moment';

  export default {
    name: 'user-edit',
    components: {Load, AreaChoose, CellEditText, BtnPrimary, Cell, CellAvatarPicker},
    data() {
      return {
        loading: false,
        avatar: this.$store.state.login.userPic,
        nickName: this.$store.state.login.userName,
        identity: '',
        time: '',
        nowDate: (Moment(new Date()).valueOf() / 1000).toFixed(0),
        DifferenceDate: 0
      };
    },

    methods: {
      getIcon() {
        // return Public.iconImg + icon + '.svg';
        return '#icon-qb_gd';
      },
      dateFormat(val) {
        return Moment(val).format('YYYY-MM-DD HH:mm:ss');
      },
      commit() {
        console.log('commit', this.avatar, 'click', this.nickName);
        if (this.nickName === '') {
          this.$toast({
            message: '昵称填写不能为空！',
            duration: 1000
          });
          // return;
        } else {
          // todo 提交
          this.loading = true;
          this.$UserReq.setUserProfile({
            pic: this.avatar,
            nick: this.nickName
          }).then((res) => {
              console.log('setUserProfile:', res, this.$store);
              this.$store.commit(Types.SET_USER_NAME, res.data.nick);
              this.$store.commit(Types.SET_USER_PIC, res.data.pic);
              this.loading = false;
              this.$router.go(-1);
            }, () => {
              this.loading = false;
            }
          );
        }
      },
      changeAvatar(file, content) {
        // todo 头像选择
        this.loading = true;
        this.$UserReq.setUserAvatar({img: file.content, dir: 'avatar'})
          .then((res) => {
            console.log('setUserAvatar-------', res);
            this.avatar = res.data.url;
            this.loading = false;
          }, () => {
            this.loading = false;
          });
      },
      changeNickName(name) {
        this.nickName = name;
        // todo 改名
      },
      upNoFile() {
        alert('上传图片过大');
      }
    },
    computed: {
      Name() {
        // return this.nickName;
        let name = this.nickName;
        return name;
      },
      textBtn() {
        //  时间
        if (this.DifferenceDate !== 0) {
          let hour = Math.floor(this.DifferenceDate / 3600);
          let minute = Math.floor((this.DifferenceDate % 3600) / 60);
          return this.identity + '身份将会在' + hour + '小时' + minute + '分后为您充值。';
        } else {
          return '';
        }
      }
    },
    watch: {
      // 监听具体数据变化，并做相应的处理
    },
    created() {
      this.loading = true;
      this.$UserReq.getUserBase('get')
        .then((res) => {
          this.loading = false;
          this.nickName = res.data.nick;
          this.avatar = res.data.img;
          this.identity = res.data.rank.levelCh;
          this.time = res.data.rank.time;
          if (this.time !== '') {
            this.DifferenceDate = this.time - this.nowDate;
            console.log('this.time', this.DifferenceDate);
          }
          console.log('12-getUserInfo', res, this.nickName);
        }, () => {
          this.loading = false;
        });
      // this.avatar = this.$store.state.login.userPic;
      // this.nickName = this.$store.state.login.userName;
      // this.province = this.$store.state.login.userProvince;
      // this.city = this.$store.state.login.userCity;
      // this.county = this.$store.state.login.userArea;
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../assets/stylus/main.styl";
  .flex-r
    flex-x()

  .flex-c
    flex-y()

  .center
    flex-center()

  .divider
    divider()

  .space
    space()

  .layout
    height 100vh
    display flex
    flex-direction column

  .container
    flex-y()

  .footer
    position fixed
    bottom 0
    height 14vw
    width 100vw
    flex-center()
    background-color transparent

  .okc {
    word-vw(12px, #999)
    margin 10px auto
    text-align center
    line-height 1.4
  }

  .new-i {
    margin-top
    flex-x()
    background white
    height cell-height
    width vw(345)
    line-height cell-height
    border-radius vw(5)
    padding 0 10px
    box-sizing border-box
    .new-ir {
      word-vw(14px, main-color)
    }
    .text-left {
      font-size word14
    }
  }

</style>
